<template>
  <div class="content">
    <h2>当前计数: {{ counter }}</h2>
    <!--1. 自定义addClick, 并且监听内部的add事件-->
    <AddCounter v-on:add="addClick"></AddCounter>
    <SubCounter @sub="subClick"></SubCounter>
  </div>
</template>

<script>
  import AddCounter from './AddCounter.vue'
  import SubCounter from './SubCounter.vue'
  export default {
    components: {
      AddCounter,
      SubCounter
    },
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      addClick(value) {
        this.counter += value
      },
      subClick(value) {
        this.counter -= value
      }
    }
    
  }
</script>

<style scoped>
</style>